import React, { useEffect, useState } from 'react'
import { Button, Input, NavBar } from 'antd-mobile'
import styles from './index.module.css'
import images from './image/react.svg'
function App() {
  const [value, setValue] = useState('')
  const [connect, setConnect] = useState([])
  const user_id = 2;
  const server_id = 4553;

  const ws = () => {
    return new WebSocket(
      `ws:113.44.139.133:8003/kao/ws?user_id=${user_id}&server_id=${server_id}`
    )
  }

  useEffect(() => {
    ws.onopen = () => {
      console.log('连接成功');

    }
  })

  return (
    <div className={styles.box_wroe}>
      <main>
        <NavBar >在线客服</NavBar>
        <div className={styles.left}>
          <span> <img src={images} alt="" /> </span>
          <span>
            亲,下拉可查看历史聊天记录哦~若您需咨询闻<br />
            题,建议您点击【订单】,选择需咨询的订单点<br />
            击【发送订单】 </span>
        </div>
        <div className={styles.right}>

        </div>
      </main>
      <footer>
        <Input
          placeholder='请输入内容'
          value={value}
          onChange={val => {
            setValue(val)
          }}
        />
        <Button
          color='primary'
          fill='solid'
          disabled={!value}
        >
          发送
        </Button>
      </footer>
    </div>
  )
}

export default App
